<template>
  <a-modal
    title="设置乐管家收衣百分比"
    :width="700"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item v-show="false" label="主键ID">
          <a-input v-decorator="['id']" disabled />
        </a-form-item>
        <div class="position:relative">
          <a-form-item :label="`当前登录的账号${userInfo.mobile}：`">
            <a-input v-model="model.code" placeholder="请填写验证码" v-if="model"/>
          </a-form-item>
          <code-button class="code-btn" :mobile="userInfo.mobile" />
        </div>
        <a-form-item :label="`设置乐管家分成单位%，(需大约等于默认的${model.default}) :`" v-if="model">
          <a-input-number v-model="model.number" placeholder="请填写百分比" :min="model.default" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { mapGetters } from 'vuex'
import codeButton from '@/components/code-btn/code-btn'
import formModalMixin from '@/mixins/formModalMixin'
import { stewardGatherRatio } from '@/api/store'
// 表单字段
const fields = ['id', 'number']

export default {
  mixins: [formModalMixin],
  components: {
    codeButton
  },
  data () {
    this.fields = fields
    this.editAction = stewardGatherRatio
    return {
      loadingImg: false,
      formLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 12 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        }
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    handleOkBefore (values) {
      return { ...this.model, ...values }
    }
  }
}
</script>

<style lang="less" scoped>
.code-btn {
  position: absolute;
  right: 0;
  top: 4px;
}
/deep/.ant-modal-body {
  min-height: 300px;
  padding: 24px 50px;
}
</style>
